|
配合自动更新页面标签title方法
自动更新页面标签title - 掘金 (juejin.cn)
在src文件夹下创建permission.js文件
在main.js文件内引入并立即使用
import '@/permission'
复制代码
permission.js文件内部
import router from './router'
import store from './store'
// 弹框组件
import { Message } from 'element-ui'
// 自动更新页面标签title方法,在utils中
import getPageTitle from '@/utils/get-page-title'
// 进度条，在axios中配置了这里可以不用配置
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
// 禁用进度环
NProgress.configure({ showSpinner: false }) // NProgress Configuration
// 白名单:不需要登录校验的路由
const whiteList = ['/login', '/404'] // no redirect whitelist
// 导航守卫
router.beforeEach(async (to, from, next) => {
// 开启进度条
NProgress.start()
// 自动更新页面标签title，title名使用前往的路由配置中meta里的title属性
document.title = getPageTitle(to.meta.title)
// 从仓库中获取token 用于判断有无token
const hasToken = store.dispatch('user/getToken')
// 有token
if (hasToken) {
//如果登录了后还想访问登录页
if (to.path === '/login') {
// 那就前往首页
next({ path: '/' })
// 结束进度条
NProgress.done()
}
//如果登录了后访问其他页
else {
//从仓库中获取用户信息
const hasGetUserInfo = store.getters.name
// 如果有用户信息
if (hasGetUserInfo) {
// 正常跳转
next()
}
// 如果没有用户信息
else {
// 获取用户信息成功
try {
// 调仓库中接口获取用户信息
await store.dispatch('user/getInfo')
// 跳转
// next()
next({ ...to })
}
// 获取用户信息失败(token过期)
catch (error) {
// 调仓库中接口清除token
await store.dispatch('user/resetToken')
// 弹出提示框提示
Message.error(error || 'Has Error')
// 跳到login页
next(`/login?redirect=${to.path}`)
// 进度条取消
NProgress.done()
}
}
}
}
// 没token
else {
// 判断访问的路径是否在白名单中，如果在
if (whiteList.indexOf(to.path) !== -1) {
// 跳转对应页面
next()
}
// 如果不在
else {
// 跳转到登录页，或者可以跳转到403页告知没有权限
next(`/login?redirect=${to.path}`)
// 结束进度条
NProgress.done()
}
}
})
复制代码
|